<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			li {
				list-style: none;
			}

			.tab {

				width: 650px;
				margin: 100px auto;
			}

			#tab_title {}

			#tab_title li {
				width: 130px;
				height: 50px;
				margin: 0px;
				background-color: #E9E9E9;
				text-align: center;
				border-bottom: 1px solid red;
				line-height: 50px;
				float: left;
				cursor: pointer;
			}

			#tab_con .item {}
		</style>
	</head>
	<body>
		<div class="tab">

			<div id="tab_title">
				<ul>
					<li class="current" style="background-color: red;">商品介绍</li>
					<li>规格与包装</li>
					<li>售后保障</li>
					<li>商品评价</li>
					<li>手机社区</li>
				</ul>
			</div>
			<div id="tab_con">
				<div class="item" style="display: block;">
					商品介绍模块内容
				</div>
				<div class="item" style="display: none;">
					规格与包装模块内容
				</div>
				<div class="item" style="display: none;">
					售后保障模块内容
				</div>
				<div class="item" style="display: none;">
					商品评价模块内容
				</div>
				<div class="item" style="display: none;">
					手机社区模块内容
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var headTabs = document.querySelectorAll('#tab_title li');
			var contentList = document.querySelectorAll('#tab_con .item');
			for (var i = 0; i < headTabs.length; i++) {
				headTabs[i].setAttribute('index', i);
				headTabs[i].onclick = function() {
					for (var i = 0; i < headTabs.length; i++) {
						headTabs[i].style.backgroundColor = "#E9E9E9";
						contentList[i].style.display = "none";
					}
					this.style.backgroundColor = "red";
					var index=this.getAttribute('index');
					contentList[index].style.display = "block";
				}
			}
		</script>
	</body>
</html>
